<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
    <meta charset="utf-8"/>
    <title>WorkHelper - 用户登录</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <meta content="" name="description"/>
    <meta content="" name="author"/>
    <link href="/skins/metronic/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="/skins/metronic/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/skins/metronic/admin/pages/css/login-soft.css" rel="stylesheet" type="text/css"/>
    <link href="/skins/metronic/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/>

    <link href="/skins/metronic/global/css/components.css" rel="stylesheet" type="text/css"/>
    <link rel="shortcut icon" href="favicon.ico"/>
</head>

<body class="login">
<!-- BEGIN LOGO -->
<div class="logo">
    <a href="view/index.html">
        <img src="/skins/metronic/admin/layout/img/logo-big.png" alt=""/>
    </a>
</div>
<!-- END LOGO -->
<!-- BEGIN SIDEBAR TOGGLER BUTTON -->
<div class="menu-toggler sidebar-toggler">
</div>
<!-- END SIDEBAR TOGGLER BUTTON -->
<!-- BEGIN LOGIN -->
<div class="content">
<!-- BEGIN LOGIN FORM -->
<form class="login-form">
    <h3 class="form-title">用户登录</h3>
    <div class="form-group">
        <!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
        <label class="control-label visible-ie8 visible-ie9">帐户</label>
        <div class="input-icon">
            <i class="fa fa-user"></i>
            <input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="请输入帐户" name="userName"/>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label visible-ie8 visible-ie9">密码</label>
        <div class="input-icon">
            <i class="fa fa-lock"></i>
            <input class="form-control placeholder-no-fix" type="password" autocomplete="off" placeholder="请输入密码" name="password"/>
        </div>
    </div>
    <div class="form-group row">
        <div class="input-icon col-xs-6">
            <i class="fa fa-barcode"></i>
            <input class="form-control placeholder-no-fix"  minlength="4" maxlength="4"  type="text" autocomplete="off" placeholder="验证码" name="validcode" required="true"/>

        </div>
        <div class="col-xs-3">
            <img src="/validcode" onclick="refreshCode(this)" class="img-rounded"></div>
    </div>
    <div class="form-actions">
        <label class="checkbox">
            <div class="checker"><span class="checked"><input type="checkbox" name="remember" value="1"></span></div> 记住</label>
        <button type="submit" class="btn blue pull-right">
            登录 <i class="m-icon-swapright m-icon-white"></i>
        </button>
    </div>
    <div class="login-options">
        <h4>第三方帐户登录</h4>
        <ul class="social-icons">
            <li>
                <a class="facebook" data-original-title="facebook" href="#">
                </a>
            </li>
            <li>
                <a class="twitter" data-original-title="Twitter" href="#">
                </a>
            </li>
            <li>
                <a class="googleplus" data-original-title="Goole Plus" href="#">
                </a>
            </li>
            <li>
                <a class="linkedin" data-original-title="Linkedin" href="#">
                </a>
            </li>
        </ul>
    </div>
    <div class="forget-password">
        <h4>忘记密码 ?</h4>
        <p>
          不用担心，点击 <a href="javascript:;" id="forget-password">
            这里 </a>
           重新设置密码
        </p>
    </div>
    <div class="create-account">
        <p>
           还没有帐户 ?&nbsp; <a href="javascript:;" id="register-btn">
          创建帐户 </a>
        </p>
    </div>
</form>
<!-- END LOGIN FORM -->
<!-- BEGIN FORGOT PASSWORD FORM -->
<form class="forget-form" action="view/index.html" method="post">
    <h3>忘记密码 ?</h3>
    <p>
       输入您的邮箱地址来获取新密码
    </p>
    <div class="form-group">
        <div class="input-icon">
            <i class="fa fa-envelope"></i>
            <input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="请输入您注册的密码" name="email"/>
        </div>
    </div>
    <div class="form-actions">
        <button type="button" id="back-btn" class="btn">
            <i class="m-icon-swapleft"></i> 返回 </button>
        <button type="submit" class="btn blue pull-right">
            获取 <i class="m-icon-swapright m-icon-white"></i>
        </button>
    </div>
</form>
<!-- END FORGOT PASSWORD FORM -->
<!-- BEGIN REGISTRATION FORM -->
<form class="register-form">
<h3>注册用户</h3>
<p>
   在下方输入您的帐户信息
</p>
<div class="form-group">
    <label class="control-label visible-ie8 visible-ie9">帐户</label>
    <div class="input-icon">
        <i class="fa fa-font"></i>
        <input class="form-control placeholder-no-fix" type="text" placeholder="输入您的帐户" name="userName"/>
    </div>
</div>
<div class="form-group">
    <!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
    <label class="control-label visible-ie8 visible-ie9">邮箱</label>
    <div class="input-icon">
        <i class="fa fa-envelope"></i>
        <input class="form-control placeholder-no-fix" type="text" placeholder="请输入您的邮箱" name="email"/>
    </div>
</div>
    <div class="form-group">
        <div class="input-icon">
            <i class="fa fa-lock"></i>
            <input class="form-control placeholder-no-fix"  type="password" autocomplete="off" id="register_password" placeholder="密码" name="password" required/>
        </div>
    </div>
    <div class="form-group">
        <div class="controls">
            <div class="input-icon">
                <i class="fa fa-check"></i>
                <input class="form-control placeholder-no-fix" type="password" autocomplete="off" id="rpassword" placeholder="重复上次的密码"   name="rpassword" required/>
            </div>
        </div>
    </div>

<div class="form-actions">
    <button id="register-back-btn" type="button" class="btn">
        <i class="m-icon-swapleft"></i> 返回 </button>
    <button type="submit" id="register-submit-btn" class="btn blue pull-right">
        提交 <i class="m-icon-swapright m-icon-white"></i>
    </button>
</div>
</form>
<!-- END REGISTRATION FORM -->
</div>
<!-- END LOGIN -->
<!-- BEGIN COPYRIGHT -->
<div class="copyright">
    2014 &copy; WorkHelper -工作管理系统
</div>
<!-- END COPYRIGHT -->
<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<!-- BEGIN CORE PLUGINS -->
<!--[if lt IE 9]>
<script src="/skins/metronic/global/plugins/respond.min.js"></script>
<script src="/skins/metronic/global/plugins/excanvas.min.js"></script>
<![endif]-->
<script src="/skins/metronic/global/plugins/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="/skins/metronic/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/skins/metronic/global/plugins/jquery.cokie.min.js" type="text/javascript"></script>
<script src="/skins/metronic/global/plugins/jQuery.md5.js" type="text/javascript"></script>
<script src="/skins/metronic/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script src="/skins/metronic/global/plugins/jquery-validation/js/jquery.validate.min.js" type="text/javascript"></script>
<script src="/skins/metronic/global/plugins/backstretch/jquery.backstretch.min.js" type="text/javascript"></script>
<script src="/skins/metronic/global/scripts/my.js" type="text/javascript"></script>
<script src="/skins/metronic/admin/pages/scripts/login-soft.js" type="text/javascript"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<script>
    jQuery(document).ready(function() {
        Login.init();
        $.backstretch([
            "/skins/metronic/admin/pages/media/bg/1.jpg",
            "/skins/metronic/admin/pages/media/bg/2.jpg",
            "/skins/metronic/admin/pages/media/bg/3.jpg",
            "/skins/metronic/admin/pages/media/bg/4.jpg"
        ], { fade: 1000, duration: 8000}
        );
    });
</script>
<!-- END JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>